<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动原理</title>
</head>
<body>
    <fieldset>
        <legend>01.浮动初步</legend>
        <!-- inline-block
            1.使块元素在一行显示
            2.使内嵌元素支持宽高
            3.换行被解析了
            4.不设置宽度的时候宽度由内容撑开
            5.在IE6,7下不支持块标签

        浮动:
            1.使块元素在一行显示
            2.使内嵌元素支持宽高
            3.不设置宽度的时候宽度由内容撑开
            4.脱离文档流(元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止)
        -->
        <style>
            .div1{height:100px;background:red;border:1px solid #000; float:left;}
            .div2{height:100px;background:red;border:1px solid #000; float:left;}
            .span1{height:100px;background:red;border:1px solid #000; float:left;}
            .span2{height:100px;background:red;border:1px solid #000; float:left;}
        </style>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <span class="span1">span1</span>
        <span class="span2">span2</span>
    </fieldset>

    <fieldset>
        <legend>02.浮动 提升层级半层</legend>
        <style>
            .box1{ width:100px;height:100px;background:red; float:left;}
            .box2{ width:200px;height:200px;background:blue;}
        </style>
        <div class="box1">box1</div>
        <div class="box2">box2font</div><!-- 为什么box2font会被挤出来？因为浮动提升了半个层级 -->
    </fieldset>

    <fieldset>
            <legend>03.清除浮动</legend>
            <style>
                .box8{ width:100px;height:100px;background:red; float:left;}
                .box9{ width:200px;height:200px;background:blue;clear: both}
                .box10{width:100px;height:100px; background:yellow; display: inline-block}
            </style>
            <div class="box8">box1</div>
            <span class="box10">123</span>
            <div class="box9">box2font</div><!-- clear left/right/both/none 元素的某个方向(是某个方向,不是相邻元素)不能有浮动元素 -->
        </fieldset>
</body>
</html>